<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜果集 | 销售报表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            border: none;
        }
        .card-header {
            background-color: #ff6b6b;
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
        }
        .chart-container {
            position: relative;
            height: 300px;
            padding: 15px;
        }
        .navbar-brand {
            color: #ff6b6b !important;
            font-weight: bold;
        }
        .back-btn {
            color: #ff6b6b;
            text-decoration: none;
            font-weight: 500;
        }
        .back-btn:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-light bg-white rounded shadow-sm mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-bar-chart-line me-2"></i>鲜果集销售报表
            </a>
            <!-- 修改后的返回商城按钮 -->
            <a href="http://localhost/index" class="back-btn">
                <i class="bi bi-arrow-left me-1"></i>返回商城
            </a>
        </div>
    </nav>

    <!-- 折线图 - 月度销售趋势 -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">月度销售趋势</h5>
        </div>
        <div class="chart-container">
            <canvas id="lineChart"></canvas>
        </div>
    </div>

    <div class="row">
        <!-- 饼图 - 销售渠道占比 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">销售渠道占比</h5>
                </div>
                <div class="chart-container">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 柱状图 - 热销商品TOP5 -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">热销商品TOP5</h5>
                </div>
                <div class="chart-container">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center py-4 text-muted">
        <small>© 2023 鲜果集销售报表系统 | 数据更新时间: 2023-06-15</small>
    </footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 折线图 - 月度销售趋势
    const lineCtx = document.getElementById('lineChart').getContext('2d');
    new Chart(lineCtx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '销售额 (万元)',
                data: [8.5, 7.2, 9.8, 10.5, 11.2, 12.8],
                borderColor: '#ff6b6b',
                backgroundColor: 'rgba(255, 107, 107, 0.1)',
                borderWidth: 3,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 饼图 - 销售渠道占比
    const pieCtx = document.getElementById('pieChart').getContext('2d');
    new Chart(pieCtx, {
        type: 'pie',
        data: {
            labels: ['微信小程序', '官网', 'APP', '线下门店'],
            datasets: [{
                data: [45, 25, 20, 10],
                backgroundColor: [
                    '#ff6b6b',
                    '#36a2eb',
                    '#ffce56',
                    '#4bc0c0'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                }
            }
        }
    });

    // 柱状图 - 热销商品TOP5
    const barCtx = document.getElementById('barChart').getContext('2d');
    new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: ['日本红颜草莓', '智利进口蓝莓', '大连美早樱桃', '阳山水蜜桃', '泰国金枕菠萝蜜'],
            datasets: [{
                label: '销量 (件)',
                data: [256, 198, 187, 156, 145],
                backgroundColor: '#ff6b6b',
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>